import { useEffect, useState } from "react";
import { loadInfoAPI } from "../../services/info";
import { dalImg, delToken } from "../../utils/tools";
import { Button, List } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import {
  FolderOutline,
  GlobalOutline,
  LikeOutline,
  LinkOutline,
  SetOutline,
  TransportQRcodeOutline,
  TruckOutline,
} from "antd-mobile-icons";

function User() {
  const [info, setInfo] = useState({});
  const [count, setCount] = useState(1);
  useEffect(() => {
    loadInfoAPI().then((res) => setInfo(res.data));
  }, []);
  const nav = useNavigate();
  const handleClick = () => {
    nav("/userinfo");
  };
  return (
    <div className="user-info">
      <List mode="card">
        <List.Item style={{ textAlign: "center" }}>
          <img
            src={dalImg(info.avatar)}
            alt={info.userName}
            style={{ maxWidth: "100vw", width: "20vw", borderRadius: "50%" }}
          />
          <h3>昵称：{info.nickName}</h3>
          <p>个人积分：{count}</p>
          <Button
            color="primary"
            size="small"
            onClick={() => setCount(count + 1)}
          >
            签到
          </Button>
        </List.Item>
        <List.Item prefix={<SetOutline />} onClick={handleClick}>
          个人信息设置
        </List.Item>
      </List>
      <List mode="card">
        <List.Item prefix={<TruckOutline />}>我的订单</List.Item>
        <List.Item prefix={<FolderOutline />}>健康档案</List.Item>
        <List.Item prefix={<TransportQRcodeOutline />}>我的优惠卷</List.Item>
        <List.Item prefix={<GlobalOutline />}>联系客服</List.Item>
      </List>
      <List mode="card">
        <List.Item prefix={<LikeOutline />}>帮助中心</List.Item>
        <List.Item prefix={<LinkOutline />}>关于我们</List.Item>
        <List.Item>
          {" "}
          <Button
            block
            color="primary"
            size="large"
            onClick={() => {
              delToken();
              nav("/");
            }}
          >
            退出登录
          </Button>
        </List.Item>
      </List>
    </div>
  );
}

export default User;
